<template>
	<div class="rechargeList-container">
    <ul class="recharge-style" v-if="is_shopping_card==1">
      <li :class="recharge_style==1?'active':''" data-style="nonShopCard" @click="clickRechargeStyle(1)">
        <!-- <i class="nonShop"></i> -->
        <p class="title">非购物卡充值</p>
      </li>
      <li :class="recharge_style==2?'active':''"
          data-style="shopCard"
          @click="clickRechargeStyle(2)">
        <p class="title">购物卡充值</p>
      </li>
    </ul>
    <non-shop-card :rechargeData="rechargeData"
                   v-show="recharge_style==1"></non-shop-card>
    <shop-card
      ref="shopCards"
      @refreshList="refreshList"
      v-show="recharge_style==2 && is_shopping_card==1"></shop-card>
    <recharge-log ref="rechargeLogs"
                  @getRechargeData="getRechargeData"
                  :class="recharge_style==1?'circular':''"></recharge-log>
  </div>
</template>

<script>
import Vue from 'vue'
import nonShopCard from './components/nonShopCard/index'
import rechargeLog from './components/rechargeLog/index'
import shopCard from './components/shopCard/index'
export default Vue.extend({
  name: 'index',
  components: {
    nonShopCard,
    shopCard,
    rechargeLog
  },
  data() {
    return {
      is_shopping_card: 1,
      recharge_style: 1,
      rechargeData: {}
    }
  },
  methods: {
    clickRechargeStyle(style) {
      if (style != this.recharge_style) {
        this.recharge_style = style
        // this.is_shopping_card
      }
    },
    /*
      * 充值记录的参数
      */
    getRechargeData(val) {
      this.rechargeData = val
      this.is_shopping_card = this.rechargeData.is_shopping_card
        wx.setNavigationBarTitle({
          title: val.ftitle_recharge
        })
    },
    // 购物卡充值之后抛出的方法 - 刷新列表
    refreshList() {
      this.$refs.rechargeLogs.rechargeListFn()
    },
    defaultShow() {
      const query = this.$route.query
      if (query.cdk && query.cdk.length > 0) {
        this.recharge_style = 2
        this.$refs.shopCards.submitData.cdk = query.cdk
      }
    }
  },
  mounted() {
    this.defaultShow()
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.$refs.rechargeLogs.rechargeListFn()
    })
  }
})
</script>

<style lang="scss">
.rechargeList-container {
  .circular {
    margin: 20px 20px 0 20px;
    border-radius: 20px;
  }
  .recharge-style {
    display: flex;
    width: 750px;
    height: 108px;
    background: rgba(255, 255, 255, 1);
    border-radius: 0px 0px 20px 20px;
    li {
      flex: 1;
      line-height: 108px;
      font-size: 28px;
      color: #333333;
      position: relative;
      text-align: center;
      &.active {
        font-weight: bold;
        &::after {
          position: absolute;
          width: 116px;
          height: 5px;
          content: "";
          background: url("https://img.wifenxiao.com/h5-wfx/images/user/recharge/title_bg.png")
            center/cover no-repeat;
          left: 50%;
          transform: translateX(-50%);
          bottom: 17px;
        }
      }
    }
  }
}
</style>
